<template>
  <div class="green-main">
    <!-- 左边温度计展示 -->
    <div class="left-data">
      <!-- @/assets/environment-data/PH.png -->
      <img :src="getimageurl(cardmessage.dataTypeId)" width="50px" height="auto" />
    </div>
    <!-- 中间数据展示 -->
    <div class="center-data">
      <div class="data-one">{{ cardmessage.ta }}{{ cardmessage.unit }}</div>
      <div class="data-two">{{ cardmessage.tb }}</div>
      <div class="data-three">{{ cardmessage.tc }}</div>
    </div>
    <!-- 右侧动态百分比 -->
    <div class="right-data">
      <div>点击查看</div>
      <div>历史数据</div>
      <!-- <div class="ani">
        <i v-if="cardmessage.jiantoutype ===1" class="el-icon-top animation"></i>
        <i v-else-if="cardmessage.jiantoutype ===3" class="el-icon-bottom animation"></i>
        <div v-else-if="cardmessage.jiantoutype ===2" class="zh-line"></div>
      </div>
      <div>{{ cardmessage.td }}</div> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    nowcardmessage: {
      type: Object,
      default: () => {
        return {
          // top: 300,
          // left: 200,
          // ta: "99.9%RH",
          // tb: "09-11 16:04",
          // tc: "监控点8空气湿度",
          // td: "0.73%",
          // dataTypeId: 1,
          // jiantoutype: 1
        }
      }
    }
  },
  data() {
    return {
      cardmessage: {
        // top: 300,
        // left: 200,
        // ta: "99.9%RH",
        // tb: "09-11 16:04",
        // tc: "监控点8空气湿度",
        // td: "0.73%", // 百分比
        // dataTypeId: 1, // 环境数据类型
        // jiantoutype: 1 // 1上 3 下 2平
      }
    }
  },
  watch: {
    // var that = this
    nowcardmessage: {
      handler(newvalue, oldvalue) {
        // console.log(oldvalue)
        // console.log(newvalue)
        // let left = newvalue.xaxis
        // let top = newvalue.yaxis
        // let ta = newvalue.lastValue1 + newvalue.symbol
        // let tb = newvalue.collectDatetime.substring(5, 15)
        // let tc = newvalue.dataTypeName
        // let td = newvalue.change
        // let dataTypeId = newvalue.dataTypeId
        this.cardmessage = {
          top: newvalue.yaxis,
          left: newvalue.xaxis,
          ta: newvalue.lastValue1 + '',
          unit: newvalue.symbol || '',
          tb: this.dateToFormat(newvalue.collectDatetime).substring(5, 16),
          // tc: newvalue.dataTypeName,
          tc: newvalue.dataItemName,
          td: newvalue.change, // 百分比
          dataTypeId: newvalue.dataTypeId, // 环境数据类型
          jiantoutype: newvalue.ststus // 1上 3 下 2平
        }
        // console.log("111")
      },
      deep: true,
      immediate: true
    }

  },
  methods: {
    getimageurl(id) {
      console.log(id)
      let zhurl = ''
      switch (id) {
        case 14:
          zhurl = require('@/assets/environment-data/illumination.png')
          break;
        case 13:
          zhurl = require('@/assets/environment-data/kongqishidu.png')
          break;
        case 12:
          // 空气温度
          zhurl = require('@/assets/environment-data/kongqiwendu.png')
          break;
        case 11:
          // 土壤湿度
          zhurl = require('@/assets/environment-data/turangshidu.png')
          break;
        case 10:
          // 土壤温度
          zhurl = require('@/assets/environment-data/humidity.png')
          break;
        case 17:
          // 水温
          zhurl = require('@/assets/environment-data/shuiwen-2.png')
          break;
        case 5:
          // 水温
          zhurl = require('@/assets/environment-data/shuiwen-2.png')
          break;
        case 3:
          // 含氧量
          zhurl = require('@/assets/environment-data/hanyangliang.png')
          break;
        case 98:
          // 液位
          zhurl = require('@/assets/environment-data/yewei.png')
          break;
        case 22:
          // 二氧化碳
          zhurl = require('@/assets/environment-data/eryanghuatan.png')
          break;
        case 113:
          // 电能
          zhurl = require('@/assets/environment-data/electric.png')
          break;
        case 38:
          // 电流
          zhurl = require('@/assets/environment-data/current.png')
          break;
        case 23:
          // 电压
          zhurl = require('@/assets/environment-data/voltmeter.png')
          break;
        case 47:
          //  功率
          zhurl = require('@/assets/environment-data/power.png')
          break;
        case 132:
          // 土壤电导率
          zhurl = require('@/assets/environment-data/diandaolv.svg')
          break;

        default:
          zhurl = require('@/assets/environment-data/PH.png')
          break;
      }
      return zhurl
    }
  }
}
</script>
<style lang="scss" scoped>
.animation {
	-webkit-animation:twinkling 1.8s infinite ease-in-out;
	animation:twinkling 1.8s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.animation2 {
	-webkit-animation:twinkling 1.8s infinite ease-in-out;
	animation:twinkling 1.8s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
@-webkit-keyframes twinkling {
	0% {
	opacity:0.2;
	filter:alpha(opacity=40);
	-webkit-transform:scale(1);
}
50% {
	opacity:0.8;
	filter:alpha(opacity=90);
	-webkit-transform:scale(1.12);
}
100% {
	opacity:0.2;
	filter:alpha(opacity=40);
	-webkit-transform:scale(1);
}
}
@keyframes twinkling {
	0% {
	opacity:0.2;
	filter:alpha(opacity=40);
	-webkit-transform:scale(1);
}
50% {
	opacity:0.8;
	filter:alpha(opacity=90);
	-webkit-transform:scale(1.12);
}
100% {
	opacity:0.2;
	filter:alpha(opacity=40);
	-webkit-transform:scale(1);
}
}
.green-main{
    width: 300px;
    height: 80px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #4896ff;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    white-space:nowrap;
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.center-data{
    width: 150px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: space-around;
    white-space:nowrap;
    border-left: 1px solid #ddd;
    .data-one{
        font-size: 14px;
        font-weight: 700;
    }
    .data-two{
        // width: 100px;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid #ddd;
    }
    .data-three{
        font-size: 14px;
        font-weight: 700;
    }
}
.left-data{
    width: 60px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right-data{
    width: 100px;
    height: 80px;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    color: #003947;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
    left: 9px;
    font-size: 18px;
    cursor: pointer;
}
.right-data:hover{
  color: #4896ff;
}
.ani{
    animation: .1s linear infinite blink;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 25px;
    -webkit-animation: mymove .3s linear infinite blink;
}
@keyframes mymove{
  0% {
    color: #fff;
     background-color: #ddd;
  }
  50% {
     background-color: #ddd;
  }
  100% {
    color: #fff;
     background-color: rgb(209, 3, 3);
  }
}
.zh-line{
  border-top: 2px #fff solid;
  height: 10px;
  width: 10px;
  // background-color: #fff;
}
</style>
